<template>
  <basic-container shadow="never">
    <el-container>
      <basic-container>
        <el-aside width="300px">
          <el-divider content-position="center">组织架构</el-divider>
          <avue-tree ref="deptTree"
                     :option="deptOption"
                     :data="deptData"
                     @node-click="deptClick"
                     @save="addDept"
                     @update="updateDept"
                     @del="deleteDept"
                     :beforeOpen="beforeOpenDeptEdit"
          ></avue-tree>
        </el-aside>
      </basic-container>
      <el-main>
        <basic-container>
          <el-divider content-position="left">部门负责人</el-divider>
          <div style="padding-left: 10px">
            <avue-crud
                v-if="tableOption"
                v-bind="bindVal"
                v-on="onEvent"
                v-model:page="page"
                v-model="startForm">
              <template v-for="(column,index) in columns" :slot="column.prop" slot-scope="{type,size,row}">
                <component :is="column.columnComponent" :row="row" :rowKey="column.prop" :column="column"></component>
              </template>
            </avue-crud>
          </div>
        </basic-container>
      </el-main>

    </el-container>


  </basic-container>
</template>

<script>
import {createStaticMixin} from "@/mixins/startCrud";

import deptApi from "@/api/sys/deptApi.js"
import treeUtils from "@/utils/treeUtils";
import deptOption from "@/option/sys/deptOption";
import sysUserManageDeptOption from "@/option/sys/sysUserManageDeptOption";
import * as sysUserManageDeptApi from "@/api/sys/sysUserManageDeptApi";

export default {
  mixins: [createStaticMixin({
    option: sysUserManageDeptOption,
    api: sysUserManageDeptApi,
  })],
  computed: {
    deptOption() {
      return {
        defaultExpandAll: true,
        formOption: deptOption(),
        props: {
          labelText: '机构名称',
          label: 'deptName',
          value: 'id',
          children: 'children'
        }
      }
    }
  },
  data() {
    return {
      deptData: [],
    }
  },
  created() {
    this.loadDept();
  },
  methods: {
    beforeOpenDeptEdit(done, type) {
      this.$refs.deptTree.formOption.boxType = type;
      done();
    },
    loadDept() {
      deptApi.getAllDept().then(res => {
        this.deptData = treeUtils.listToTree(res.data.data);
      })
    },
    searchReRestBefore() {
      this.$refs.deptTree.setCurrentKey(null);
      this.searchParams.deptId = -1;
    },
    beforeLoadDataSource() {
      if (!this.searchParams.deptId) {
        this.searchParams.deptId = -1;
      }
    },
    addDept(node, data, done, loading) {
      deptApi.add(data).then(res => {
        done();
        this.loadDept();
      })
    },
    updateDept(node, data, done, loading) {
      data.children = null;
      deptApi.updateById(data).then(res => {
        done();
      })
    },
    deleteDept(node, done) {
      deptApi.deleteById(node.id).then(res => {
        done()
      })
    },
    deptClick(data) {
      this.searchParams.start_search_deptId = data.id;
      this.loadRemoteDataSources()
    }
  }
}
</script>

<style scoped>

</style>
